<!-- 页面 -->
<template>
    <div class="login">
        <el-card class="box-card">
            <div>
                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                    <el-form-item prop="email" label="邮箱" :rules="[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ]">
                        <el-input v-model="dynamicValidateForm.email"></el-input>
                    </el-form-item>
                    <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'密码'"
                        :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{
                            required: true, message: '密码不能为空', trigger: 'blur'
                        }">
                        <el-input  v-model="domain.value"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">登录</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </el-card>


    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            dynamicValidateForm: {
          domains: [{
            value: '123123'
          }],
          email: 'super@a.com'
        }
        }
    },
    //生命周期函数
    mounted() {
    },
    // 调用方法
    methods: {
        submitForm() {
            var value =this.dynamicValidateForm.domains[0].value
            var email = this.dynamicValidateForm.email
            this.$axios.post('/api/auth/login',{
                email:email,
                password:value
            }).then(res=>{
                console.log(res);
                localStorage.setItem('token',res.access_token)
                this.$router.push('/yong')
            })
        },
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 500px;
    height: 300px;
    margin: auto;
    position: absolute;
    margin-top: 15%;
    margin-left: 30%;
}
.login{
    width: 100%;
    height: 100%;
}
</style>